import React from "react";
import { ConfigProvider, Tabs } from "antd";
import ProductDetails from "./ProductDetails";
import AppPage from "./Preview/Previewtag";
import UserTablePage from "./Authority/AuthorityTags";
import { ProductDetails as ProductDetailsInterface } from "./index";

const onChange = (key: string) => {
  console.log(key);
};


// 定义 Tags 组件 props 类型，包括 productDetails  
interface TagsProps {
  productDetails: ProductDetailsInterface; 
}

const Tags: React.FC<TagsProps> = ({ productDetails }) => {
  const items = [
    {
      key: "1",
      label: "基础信息",
      children: <ProductDetails productDetails={productDetails} />, // 从 props 传递 productDetails  
    },
    {
      key: "2",
      label: "商品预览",
      children: <AppPage productDetails={productDetails} />, 
    },
    {
      key: "3",
      label: "权限管理",
      children: <UserTablePage />, 
    },
  ];

  return (
    <ConfigProvider
      theme={{
        components: {
          Tabs: {
            horizontalMargin: "0 36px",
            horizontalItemGutter: 48,
            titleFontSize: 16,
          },
        },
      }}
    >
      <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
    </ConfigProvider>
  );
};

export default Tags;